<template>
    <div class="ml-16px mr-16px mb-16px pt-26px content-container">
        <div class="pl-26px pr-26px pb-26px words-container">
            <div class="flex items-center pl-36px pt-26px -mt-26px -ml-26px text-14px font-bold level-2-title">
                预设组合
            </div>
            <div class="mt-10px">
                <div class="combination-checkbox">
                    <div class="custom-checkbox-group flex-wrap">
                        <el-checkbox-group v-model="ruleForm.combinationOptions"
                            class="flex !flex-row flex-wrap w-full">
                            <div class="flex items-center w-25%" v-for="item in ruleForm.combinations" :key="item.ID">
                                <el-checkbox :value="item.ID" @change="handleChange(item.ID)"></el-checkbox>
                                <label class="custom-checkbox" @click="handleChecked(item.ID)">
                                    <span class="custom-checkbox-label" :style="{ color: item.FontColor }">
                                        {{ item.Presets }} <span v-if="item.Count">({{ item.Count }})</span>
                                    </span>
                                </label>
                                <el-button link class="ml-10px" v-if="item.Count"
                                    @click="handleView(item)">查看</el-button>
                            </div>
                        </el-checkbox-group>
                    </div>
                </div>
            </div>
            <div class="flex justify-end mt-6px">
                <el-button :loading="state.loading" type="primary" @click="handleConfirm">确认提交</el-button>
            </div>
        </div>

        <CombinationWordDialog v-if="state.isCombinationDialog"
            v-model:CombinationWordDialog="state.isCombinationDialog" :title="state.dialogTitle" :id="state.id" :checkAll="state.checkAll"
            :combinations="state.combinations" :checkCombinationOptions="state.checkCombinationOptions" @closeDialog="state.isCombinationDialog = false" @checked="handleCheck" />
    </div>
</template>

<script setup lang="ts">
import CombinationWordDialog from './CombinationWordDialog.vue'
import { getCombinationWordsApi,addProjectKeywordApi } from '@/api/geoBasic'
import { getFreedomWordID,checkGeo,checkMainWord } from '@/utils/index'
import { useUserStore } from '@/store/modules/user'
import { confirmMessageBox } from '@/utils/elMessageBox'
import { CircleCloseFilled, SuccessFilled } from '@element-plus/icons-vue'

const props = defineProps<{
    ruleForm: any
}>()

const state = reactive({
    isCombinationDialog: false,
    combinations: [],
    dialogTitle: '',
    id:0,
    loading: false,
    checkAll:false,
    checkCombinationOptions:<string[]>[]    //多个组合词选中状态集合
})

const userStore = useUserStore()

function handleChecked(id: number) {
    if (props.ruleForm.combinationOptions.includes(id)) {
        // 选中状态，取消选中
        props.ruleForm.combinationOptions = props.ruleForm.combinationOptions.filter((item: number) => item !== id)
    } else {
        // 未选中状态，选中
        props.ruleForm.combinationOptions.push(id)
        state.id = id
    }
}

function handleChange(id: number) {
    state.id = id
}

function formatMainWords(words: any) {
    let mainWords = ''
    if (words.length === 0) {
        return mainWords
    } else if (words.length === 1) {
        return words[0].label
    } else {
        words.forEach((word: any) => {
            mainWords += word.label + '/'
        })
        return mainWords.slice(0, -1)
    }

}

async function handleView(word: any) {
    if(props.ruleForm.combinationOptions.includes(word.ID)){
        state.checkAll = true
    }else{
        state.checkAll = false
    }
    state.id = word.ID
    const { api } = checkGeo(userStore.geo)
    const res: ResType = await getCombinationWordsApi(api, {
        id: word.ID,
        keyword: formatMainWords(props.ruleForm.mainWords),
        region: props.ruleForm.area
    })
    if (res.code === 200) {
        state.combinations = res.data
        state.dialogTitle = `查看组合词 - ${word.Presets}`
        state.isCombinationDialog = true
    }
}

async function handleConfirm() {
    try {
        const { api } = checkGeo(userStore.geo)
        const res = await addProjectKeywordApi(api, {
            ID: props.ruleForm.id,
            Keyword: checkMainWord(props.ruleForm.mainWords),
            leftkeydata: props.ruleForm.frontWords,
            rightkeydata: props.ruleForm.backWords,
            CusKeyword: props.ruleForm.cusKeyword,
            Freedoms: getFreedomWordID(props.ruleForm.freedomWords),
            DeleteKeyword: props.ruleForm.deleteWord.endsWith("/") ? props.ruleForm.deleteWord.slice(0, -1) : props.ruleForm.deleteWord,
            Type: props.ruleForm.combinationOptions
        })
        if (res.code === 200) {
            state.loading = false
            confirmMessageBox(SuccessFilled, res.message)
        }
    } catch (error: any) {
        if (error.response && error.response.status === 405) {
            confirmMessageBox(CircleCloseFilled, error.response.data.message)
            state.loading = false
        }
    }
}

function handleCheck(options: any) {
    options.forEach((item: any) => {
        if (!state.checkCombinationOptions.includes(item)) {
            state.checkCombinationOptions.push(item)
        }
    });
}
</script>

<style scoped>
:deep(.el-radio) {
    margin-right: 0 !important;
    width: 25%;
}

:deep(.el-checkbox) {
    margin-right: 0 !important;
}

.custom-checkbox-group {
    display: flex;
    flex-wrap: wrap;
}

.custom-checkbox {
    display: flex;
    align-items: center;
    cursor: pointer;
    height: 32px;
}

.custom-checkbox-label {
    font-size: 14px;
}
</style>